<template>
  <a @click="click" class="download-button">
    <img
      v-if="platform === 'iOS'"
      src="@/assets/icon_platform_ios.svg"
      alt="iOS icon"
    />
    <img
      v-if="platform === 'Android'"
      src="@/assets/icon_platform_android.svg"
      alt="Android icon"
    />
    <span v-if="title">{{ title }}</span>
    <slot v-else></slot>
  </a>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  props: {
    platform: {
      type: String,
      default: 'iOS'
    },
    title: {
      type: String,
      default: null
    }
  },
  methods: {
    click () {
      this.$emit('click')
    }
  }
}
</script>
<style lang="scss" scoped>
  .download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    text-decoration: none;
    color: black;
    border: 1px solid lightgray;
    box-shadow: var(--shadow);
    padding: 0 15px 0 10px;
    border-radius: 10px;
    background-color: white;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font: inherit;
    gap: 5px;
    &:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }
    img {
      width: 30px;
      height: 30px;
    }
  }
</style>
